<template>
    <div class="app-container cont">
        <div class="box" v-if="!form">
            <div class="header">
                <span></span>
                <b style="font-size: 24px;color: #107ce1;">{{ route.query.eventAbbrevia }}</b>
                <span></span>
            </div>
            <p class="indent">据中国地震台网测定，北京时间{{ getData(route.query.occurrenceDate,1) }}{{ getData(route.query.occurrenceTime,2) }}，在{{ route.query.location }}(北纬{{
                route.query.latitude }}度，东经{{ route.query.longitude }}度)
                发生{{ route.query.magnitude }}级地震，震源深度{{ route.query.depth }}千米。</p>
        </div>
        <div class="box codeContent" id="pdf-wrapper" v-if="form">
            <div class="header">
                <span></span>
                <b style="font-size: 20px;color: #107ce1;">{{ form.eventAbbreviation }}</b>
                <!-- <el-button type="primary" @click="handleDown">下载</el-button> -->
                <el-button type="primary" @click="downImg">下载</el-button>
            </div>
            <div>
                <p class="indent">据中国地震台网测定，北京时间{{ getData(form.jedsDate,1) }}{{getData(form.jedsTime,2)}},在{{ form.referencePosition }}(北纬{{
                    form.jedsLatitude }}度，东经{{ form.jedsLongitude }}度)
                    发生{{ form.magnitude }}级地震，震源深度{{ form.depth }}千米。。此次地震最高烈度为{{ form.maximumIntensity }}。</p>
                <p><b>宏观震中：</b>{{ form.location1 }}</p>
                <p><b>人员伤亡情况：</b>本次地震已致{{ form.deadNumber }}人遇难，{{ form.injuries }}人受伤。{{ form.causeOfDeath }}</p>
                <p v-if="form.desEarthquakeDamage"><b>震害现象描述：</b>{{ form.desEarthquakeDamage }}</p>
                <p v-if="form.note"><b>说明：</b>{{ form.note }}</p>
                <el-divider />
                <p class="juzhong" v-if="form.isolinePicList"><b class="subtitle">等震线</b>
                    <el-space wrap :size="10">
                        <ImagePreview v-for="item in form.isolinePicList" :src="baseUrl+item.attachId" class="img"></ImagePreview>
                    </el-space>
                </p>
                <p class="juzhong" v-if="form.intensityMapList"><b class="subtitle">烈度图</b>
                    <el-space wrap :size="10">
                        <ImagePreview v-for="item in form.intensityMapList" :src="baseUrl+item.attachId" class="img"></ImagePreview>
                    </el-space>
                </p>
                <p class="juzhong" v-if="form.jedsZhzp"><b class="subtitle">典型震害图片</b>
                    <el-space wrap :size="10">
                        <ImagePreview v-for="item in form.jedsZhzpList" :src="baseUrl+item.attachId" class="img"></ImagePreview>
                    </el-space>
                    </p>
                <el-divider />
                <p class="juzhong" v-if="form.attachmentList">
                    <b class="subtitle">附件</b>
                    <div>
                        <span v-for="item in form.attachmentList"><span>{{ item.attachName }}</span>
                        <span
                            style="padding:5px 10px;background-color: #107ce1;color: #fff;margin-left: 20px;border-radius: 2px;cursor: pointer;"
                            @click="handleDownload(item)">下载</span><br>
                    </span>
                    </div>
                </p>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 20px auto" />
        </el-dialog>
    </div>
</template>
  
<script setup>
import html2canvas from "html2canvas";
import { detail } from "@/api/informationRetrieval/historicalSeismicEvent.js"
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const dialogVisible = ref(false);
const dialogImageUrl = ref();

const form = ref({});
// const baseUrl = import.meta.env.VITE_APP_BASE_API + "/other/Download";
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";

function getData(data,num){
    if(!data){
        return data
    }else{
        if(num==1){
            let str = '';
            let arr = data.split('-');
            str =  arr[0]+'年'+arr[1] +'月'+arr[2]+'日';
            return str
        }else{
            let str = '';
            let arr = data.split(':');
            str =  arr[0]+'时'+ arr[1] +'分'+ arr[2]+'秒';
            return str
        }
    }
}

// 截图下载
function downImg() {
    html2canvas(document.querySelector('.codeContent')).then(canvas => {
        const imgUrl = canvas.toDataURL('image/jpeg')
        const image = document.createElement('img')
        image.src = imgUrl
        const a = document.createElement('a')
        a.href = imgUrl
        // a.download 后面的内容为自定义图片的名称
        a.download = '地震灾害信息'
        a.click()
    })
}

// 下载文件
function handleDownload(item) {
    var query = {
        attachId: item.attachId,
        name: item.attachName
    }
    location.href =  baseUrl + '?id=' + query.attachId + '&name=' + query.name + '&dataOrigin=5';
}
// 单条信息
function getDetail(query) {
    proxy.$modal.loading();
    detail(query).then(res => {
        proxy.$modal.closeLoading();
        form.value = res.data;
    })
}
getDetail(route.query)
</script>
  
<style lang="scss" scoped>
.box {
    width: 100%;
    padding: 20px;
    font-size: 16px;
}

.cont {
    padding-left: 25%;
    padding-right: 25%;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.indent {
    text-indent: 2em;
}

.img {
    width: 100px;
    height: 100px;
}

.juzhong {
    display: flex;
    align-items: center;
}

.subtitle {
    display: inline-block;
    width: 100px;
}
</style>
  